<template>
	<view class="contener">
		<view class="biaodanBox">
			<view class="contener700" style="padding-top: 10rpx;">
				<view class="wallBox">
					<view class="textCenter">
						<view class="wallet">
							<view>
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/wallet.png">
									</image>
								</view>
								<view class="wallettext">
									钱包
								</view>
							</view>
						</view>
					</view>
					<view class="textCenter">
						<view style="font-size: 40rpx;font-weight: bold;">
							{{balance}}￥
						</view>
						<view style="font-size: 25rpx;color: #C4C4C4;">
							我的余额
						</view>
					</view>
					<view class="btn">
						<view class="czBtn">
							<u-button v-if="false" text="去提现▶"
								color="linear-gradient(to right, rgb(66,146,230), rgb(51,213,213))" shape="circle"
								size="large" @click="tiXian()">
							</u-button>
						</view>
						<view class="txBtn">
							<u-button text="去充值▶" color="linear-gradient(to right, rgb(83,193,148), rgb(184,214,92))"
								shape="circle" size="large" @click="goToUp()">
							</u-button>
						</view>
					</view>
				</view>


				<uni-forms v-model="formData" ref="form" :rules="rules" label-width="80">
					<uni-forms-item label="完善姓名:" name="name">
						<uni-easyinput type="text" v-model="formData.name" maxlength="10" placeholder="请输入姓名"
							@input="iptChange" />
					</uni-forms-item>
					<uni-forms-item label="手机号:" name="phone">
						<uni-easyinput type="number" v-model="formData.phone" maxlength="11" placeholder="请输入手机号"
							@input="iptChange" />
					</uni-forms-item>
					<uni-forms-item v-if="formObj.isShow" label="图像验证码:" name="imgCode">
						<uni-easyinput style="display: inline-block;
						    width: 55%" maxlength="4" class="imgCodeInput" type="number" v-model="formData.imgCode"
							placeholder="请输入图像验证码" />
						<ImgCode width="200rpx" height="65rpx" style="display: inline-block;
                vertical-align: middle;
                margin-left: 15rpx;" :sign.sync="formData.sign" ref="imgCode">
						</ImgCode>
					</uni-forms-item>

					<uni-forms-item v-if="formObj.isShow" name="phoneCode" label="手机验证码:">
						<view style="position: relative">
							<uni-easyinput type="number" v-model="formData.phoneCode" maxlength="6">
							</uni-easyinput>

							<!--获取验证码按钮-->
							<text style="position: absolute;
                  z-index: 100;
                  right:18rpx;top: 20rpx;
                  font-size: 24rpx;" @click="getPhoneCode()">
								{{phoneCodeBtn.content}}
							</text>
						</view>
					</uni-forms-item>
					<button class="commitBtn" @tap="submitForm" type="primary"
						:disabled="!formObj.isSubmitBtn">提交</button>

					<view class="tishi">
						<text>完善信息后方可进行提现和入驻等操作</text>
					</view>
				</uni-forms>
<!-- 				<view class="wallBox " style="margin-top: 40rpx;height: 132px;font-size: 15px;color: #797979;">
					您在登录小程序后，任意界面点击右上角分享小程序给微信朋友，朋友点击进来购买拼单商品或体验采摘蔬菜后，您即可获得佣金，邀请的朋友越多，佣金越多(佣金结算周期为用户购买的商品确认收货一个星期后)
				</view> -->

<!-- 				<view class="wallBox" style="height: 100rpx;margin-top: 50rpx;" @click="goPage(1)">
					<view style="display: flex;width: 100%;">
						<text class="iconfont icon-haoyou" style="color: #33a4c5;"></text>
						<view class="sTitle">
							<text>我邀请的用户</text>
						</view>
						<view style="margin-left: auto;">
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</view>
				</view> -->
				<view class="wallBox" style="height: 100rpx;margin-top: 30rpx;" @click="goPage(2)">
					<view style="display: flex;width: 100%;">
						<text class="iconfont icon-tixianjilu" style="color: #f59a2a;margin-left: -10rpx;"></text>
						<view class="sTitle">
							<text>收支明细</text>
						</view>
						<view style="margin-left: auto;">
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</view>
				</view>

				<view class="wallBox" style="height: 100rpx;margin-top: 30rpx;" @click="goPage(1)">
					<view style="display: flex;width: 100%;">
						<text class="iconfont icon-haoyou" style="color: #33a4c5;"></text>
						<view class="sTitle">
							<text>推广中心</text>
						</view>
						<view style="margin-left: auto;">
							<uni-icons type="forward" size="20"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ImgCode from "../../common/ImgCode.vue"
	import UniEasyinput from "../../components/uni-easyinput/uni-easyinput";

	export default {
		components: {
			UniEasyinput,
			ImgCode
		},
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					// 图像验证码
					imgCode: '',
					// 手机号验证码
					phoneCode: '',
					// 图像验证码 sign
					sign: '',
					// 手机验证码密钥
					phoneCodeKey: '',
				},
				formObj: {
					// 是否显示修改手机号验证
					isShow: false,
					// 是否启用提交按钮
					isSubmitBtn: false,
					syl: 'height: 45vh;',
				},
				balance: null,
				oldName: null,
				oldPhone: null,
				/* 获取手机验证码按钮*/
				phoneCodeBtn: {
					content: '获取验证码',
					isEnable: true,
					syl: 'color: #2ab0fe',
					open() {
						this.isEnable = true
						this.syl = 'color: #2ab0fe'
						this.content = '重新获取'
					},
					close() {
						this.isEnable = false
						this.syl = 'color: #555e65'
						let time = 60;
						let _t = this
						_t.content = time-- + '秒后可重试';
						let phoneInterval = setInterval(function() {
							if (time <= 0) {
								_t.open()
								clearInterval(phoneInterval)
								return
							}
							_t.content = time-- + '秒后可重试';
						}, 1000)
					}
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入11位手机号'
							},
							{
								pattern: '^1(3\\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\\d|9[0-35-9])\\d{8}$',
								errorMessage: '手机号格式不正确'
							}
						]
					},
					imgCode: {
						rules: [{
							required: true,
							errorMessage: '请输入图像验证码',
						}, ]
					},
					phoneCode: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号验证码',
						}]
					},
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(e) {
			if (e.type == 1) {
				uni.showToast({
					title: '请先完善个人信息',
					icon: 'none',
					duration: 2500
				});
			}
			this.getinfo()
		},
		onShareAppMessage(res) {
			let usId = uni.getStorageSync("usId")
			let route = this.$mp.page.route;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			setTimeout(() => {
				if (!usId) {
					uni.showToast({
						title: "您还未登录，登陆后小程序内任意页面分享链接，用户点击链接拼单后您即可获取佣金",
						icon: 'none',
						duration: 20000
					})
				}
			}, 2000)
			return {
				title: '快来体验种菜的乐趣吧😄~',
				path: route + `?&parentId=${uni.getStorageSync("usId")}`,
				imageUrl: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.NTfZuM9eGgYuIoVGI1QL4AHaE8?pid=ImgDet&rs=1',
			}
		},
		methods: {
			goPage(type) {
				uni.navigateTo({
					url: type == 1 ? "/pageA/mine/userList" : "/pageA/mine/incomeExpenses"
				})
			},
			tiXian() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none',
					duration: 1000
				});
			},
			goToUp() {
				uni.redirectTo({
					url: "../../pageA/mine/topUp?amount=" + this.balance
				})
			},
			// 姓名 和 手机号改变事件
			iptChange() {
				let form = this.formData;

				let changeV = 0;
				if (form.name !== this.oldName) {
					changeV += 2;
				}
				if (form.phone !== this.oldPhone) {
					changeV += 1;
				}
				if (changeV === 0) {
					this.formObj.isShow = false
					this.formObj.isSubmitBtn = false
				} else if (changeV % 2 !== 0) {
					this.formObj.isShow = true
					this.formObj.isSubmitBtn = true
				} else {
					this.formObj.isSubmitBtn = true
				}
			},
			// 获取手机验证码
			getPhoneCode() {
				if (!this.phoneCodeBtn.isEnable) {
					return
				}
				let _t = this;
				this.$refs.form.validateField(['phone', 'name', 'imgCode']).then(res => {
					if (_t.formData.sign === '') {
						console.log("获取手机验证码异常,没有 图像验证码 sign ： ", _t.formData.sign)
						return
					}
					console.log('即将请求的表单 ： ', this.formData)
					_t.formData.phoneCode = "";
					_t.$axios({
						url: 'sms/public/sendCode',
						method: "post",
						data: {
							phone: _t.formData.phone,
							verifyCode: _t.formData.imgCode,
							verifySign: _t.formData.sign,
						}
					}).then(res => {
						console.log('rsss', res)
						if (res.code == 0) {
							console.log("获取手机验证密钥 res :", res)
							_t.formData.phoneCodeKey = res.result
							uni.showToast({
								title: "短信验证码已发送，请注意查收",
								icon: 'none',
								duration: 2000
							});
							_t.phoneCodeBtn.close();
						}
					})
				}).catch(err => {
					console.log('获取验证码失败 - 表单错误： ', err)
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none',
						duration: 2000
					});
				})
			},
			submitForm() {
				let _t = this;
				// 要校验的数组
				let checkFields = !_t.formObj.isShow ? ["name"] : ["phone", "name", "phoneCode"]
				this.$refs.form.validateField(checkFields).then(res => {
					if (!_t.formObj.isShow) {
						if (_t.oldName === _t.formData.name) {
							return
						}
						_t.$axios({
							url: 'user/info/updateUserName',
							method: 'post',
							data: {
								name: _t.formData.name
							}
						}).then(res => {
							// 提交成功更新旧名称
							_t.oldName = _t.formData.name;
							_t.iptChange()
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							})
						})
					} else {
						// 未绑定手机号提交信息
						let temp = _t.formData.phoneCodeKey;
						console.log(_t.formData.phoneCodeKey);
						if (temp === '' || temp === null || typeof temp === "undefined") {
							uni.showToast({
								title: '提交失败, 验证码不存在',
								icon: 'none',
								duration: 2000
							})
							return
						}
						_t.$axios({
							url: "user/info/perfectInfo",
							method: "post",
							data: {
								name: this.formData.name,
								phone: this.formData.phone,
								phoneCode: this.formData.phoneCode,
								codeKey: this.formData.phoneCodeKey
							}
						}).then((res) => {
							console.log('res', res)
							if (res.code === 0) {
								_t.oldName = _t.formData.name;
								_t.oldPhone = _t.formData.phone;
								_t.iptChange()
								this.getinfo()
								// this.goBack()
								uni.showToast({
									title: '提交成功',
									duration: 2000
								});
							} else {
								_t.$refs.imgCode.getImgCode()
								_t.formData.imgCode = ""
							}
						})
					}
				}).catch(err => {
					let title = err[0].errorMessage === ' ' ? '请先完善表单' : err[0].errorMessage
					uni.showToast({
						title: title,
						icon: 'none',
						duration: 2000
					});
					console.log('表单错误信息：', err);
				})

			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			getinfo() {
				let _t = this;
				this.$axios({
					url: "user/info/info",
					method: "post",
					data: {

					}
				}).then((res) => {
					console.log('res', res)
					this.balance = res.result.balance
					if (res.result.name) {
						this.formData.name = res.result.name
						_t.oldName = res.result.name
						this.formData.phone = res.result.phone
						uni.setStorageSync('iphone', res.result.phone);
						// res.result.phone = '';
						let phone = res.result.phone;
						// 判断用户是否绑定手机号
						if (phone === '' || phone === null || typeof phone === "undefined") {
							console.log("没有绑定手机号")
							_t.formObj.isBindingPhone = false;
							_t.formObj.isSubmitBtn = true;
							_t.formObj.isShow = true
						} else {
							_t.formObj.isBindingPhone = true;
							_t.oldPhone = res.result.phone
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleBox {
		font-size: 40rpx;
		text-align: center;
		color: #1aad19;
		margin: 10rpx auto 30rpx;
		font-weight: bold;
	}

	/deep/ .uni-forms {
		overflow: auto;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.biaodanBox {
		padding-top: 30rpx;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		/* background-image: url(); */
	}

	.wallBox {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		/* justify-content: space-around; */
		margin: 0 auto;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 160rpx;
		padding: 0rpx 40rpx 0rpx 30rpx;

		.sTitle {
			line-height: 27rpx;
			margin-left: 13rpx;
			font-weight: bolder;
		}
	}

	.wallet {
		height: 80rpx;
		margin-right: 15rpx;
	}

	.wallettext {
		font-size: 20rpx;
		color: #fff;
	}

	.wallet image {
		width: 91rpx;
		height: 86rpx;
	}

	.textCenter {
		text-align: center;
	}

	/deep/ .uni-forms-item__inner.data-v-39373d84 {
		/* display: flex; */
		padding-bottom: 10rpx;
	}

	.martop {
		margin-top: 19rpx;
	}

	.btnsubmitForm {
		position: absolute;
		width: 650rpx;
		margin-left: 27rpx;
		top: 35%;
	}

	.btn {
		margin-left: auto;
		display: flex;

		.czBtn {
			margin-right: 15rpx;
		}

		.u-button--large.data-v-2bf0e569 {
			width: 135rpx;
			height: 35px;
			padding: 0 15px;
		}
	}

	.tishi {
		font-size: 25rpx;
		color: #a59999;
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
	}

	.commitBtn {
		margin: 0 auto;
	}
</style>
